<template>
  <Menu.Item :key="itemKey">
    <span class="flex items-center">
      <Icon :icon="icon" class="mr-1" />
      <span>{{ text }}</span>
    </span>
  </Menu.Item>
</template>
<script lang="ts" setup>
  import { Menu } from 'ant-design-vue'
  import { computed, getCurrentInstance } from 'vue'
  import Icon from '@/components/Icon/Icon.vue'
  import { propTypes } from '@/utils/propTypes'

  defineOptions({ name: 'DropdownMenuItem' })

  defineProps({
    text: propTypes.string,
    icon: propTypes.string,
  })

  const instance = getCurrentInstance()
  const itemKey = computed(() => instance?.vnode?.props?.key)
</script>
